@extends('home.layout.base')
@section('styles')
    <link href="{{ asset('css/index.css') }}" rel="stylesheet">
@endsection
@section('scripts')
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/index.js') }}" type="text/javascript"></script>
    <script>
        $(function () {
            let app = new Vue({
                el: '#app',
                data: function() {
                    return {
                        listData: [],
                        loading: false,//加载loading开关
                        params:{page : 1, cateid : 1021},
                    }
                },
                created(){
                    this.list();
                },
                methods: {
                    list() {
                        let that = this;
                        this.loading = true;
                        setTimeout(()=>{
                            $.get("{{ route('home.college.index') }}",this.params,function(res){
                                that.listData = res.data;
                                that.loading = false;
                                that.params.page ++;
                            })
                        },300);
                    },
                    info(id) {
                        window.location.href = "{{ route('home.college.info') }}"+'?id='+id;
                    },
                    paginate(){
                        this.list();
                    },
                    changePage(val) {
                        this.params.page = val;
                        this.list();
                    },
                }
            });
            $(function () {
                $('.main-college-menu li').click(function(){
                    $(this).siblings().children('a').removeClass("active");
                    $(this).children('a').addClass("active");
                    //子类默认全部
                    $('.main-new-child-menu li').siblings().removeClass("active");
                    $('.main-new-child-menu li:first-child').addClass("active");
                    let id = parseInt($(this).attr('data-id'));
                    app.params.cateid = id;
                    app.params.page = 1;
                    app.paginate();
                });
            });
        })
    </script>
@endsection
@section('content')
    <div class="container main">
        <div class="row">
            <div class="col-lg-12 main-college-menu">
                <ul>
                    @foreach($college_category as $key=>$cate)
                        <li data-id="{{$cate['id']}}"><a @if($key == 0) class="active" @endif href="javascript:void(0)">{{$cate['name']}}</a></li>
                    @endforeach
                </ul>
            </div>
        </div>
    </div>
    <div style="background: #fff;width: 100%;padding-bottom: 25px">
        <div class="container">
            <div class="row">
                <div class="col-lg-12 main-college-list" id="app" v-cloak v-loading="loading"
                     element-loading-spinner="fa fa-spinner fa-pulse" style="min-height: 250px">
                    <div v-for="items in listData.data" class="main-college-item" @click="info(items.id)">
                        <div class="book-img">
                            <img :src="items.thumb" alt="">
                        </div>
                        <p class="book-title">@{{ items.title }}</p>
                        <div class="book-info">
                            <span class="book-info-view"><i class="fa fa-eye"></i> @{{ items.view }}</span>
                            <span class="book-info-download"><i class="fa fa-download"></i> @{{ items.download }}</span>
                        </div>
                    </div>
                    <div class="col-lg-12 liange-pagination">
                        <el-pagination v-if="listData && listData.last_page > 1"
                                       background
                                       :page-size="listData.per_page"
                                       layout="prev, pager, next, jumper"
                                       :total="listData.total"
                                       prev-text="上一页"
                                       next-text="下一页"
                                       :current-page="listData.current_page"
                                       @current-change="changePage">
                        </el-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

